<template>
  <div>
    <search-box></search-box>
    <nav-url name="我的收藏" v-if="islog" :nav-cards="collect"></nav-url>
    <el-tabs class="tabs" v-model="activeName">
      <el-tab-pane label="优质推荐" name="first">
        <nav-url :nav-cards="recommend"></nav-url>
      </el-tab-pane>
      <el-tab-pane label="影视" name="second">
        <nav-url :nav-cards="movies"></nav-url>
      </el-tab-pane>
      <el-tab-pane label="学习" name="third">
        <nav-url :nav-cards="learn"></nav-url>
      </el-tab-pane>
      <el-tab-pane label="办公素材" name="fourth">
        <nav-url :nav-cards="work"></nav-url>
      </el-tab-pane>
      <el-tab-pane label="软件工具" name="fiveth">
        <nav-url :nav-cards="tools"></nav-url>
      </el-tab-pane>
    </el-tabs>
    <user-background v-if="bgBox"></user-background>
    <div v-if="islog" class="setBackground" @click="bgBoxDisplay">
      <img src="../assets/set.svg" alt="">
    </div>
  </div>
</template>


<script>
import SearchBox from "@/components/SearchBox";
import NavUrl from "@/components/NavUrl";
import Cookies from "js-cookie";
import {ApiConfig} from "@/config/AxiosApi";
import UserBackground from "@/components/UserBackground.vue";

export default {
  name: "HomeView",
  data(){
    return{
      recommend:[],
      learn:[],
      movies:[],
      work:[],
      tools:[],
      islog: false,
      collect: [],
      activeName: 'first',
      bgBox:false,
      bgBoxLeft:10,
    }
  },
  methods:{
    bgBoxDisplay(){
      this.bgBox = this.bgBox == true?false:true
      this.bgBoxLeft = this.bgBoxLeft == 10?620:10
      let elements = document.body.getElementsByClassName("setBackground");
      for (let i = 0; i < elements.length; i++) {
        elements[i].style.left = this.bgBoxLeft + "px";
      }
    }
  },
  created() {
    if(Cookies.get("token")){
      this.$axios.get(ApiConfig["getcollect"],{
        params: {
          userid: Cookies.get("user"),
          token: Cookies.get("token")
        }
      })
        .then(res=>{
          this.collect = res["data"]
        })
        .catch(err=>{
          console.log(err)
        })
      this.islog = true
    }
    const categories = ['优质推荐', '影视', '学习', '办公素材', '软件工具'];
    const requests = categories.map(category => {
      return this.$axios.get(ApiConfig["getcategorynavlist"], {
        params: { category: category }
      });
    });
    Promise.all(requests)
        .then(responses => {
          responses.forEach((response, index) => {
            switch (index){
              case 0:
                this.recommend = response.data;
                break;
              case 1:
                this.movies = response.data;
                break;
              case 2:
                this.learn = response.data;
                break;
              case 3:
                this.work = response.data;
                break;
              case 4:
                this.tools = response.data;
                break;
            }
          });
        })
        .catch(error => {
          // 处理错误
          console.error(error);
        });
  },
  components:{
    SearchBox,
    NavUrl,
    UserBackground
  }
}
</script>
<style>
.tabs {
  margin: auto;
  max-width: 1210px;
}
.bottom{
  text-align: center;
  margin-top: 60px;
  padding-bottom: 8px;
}
.setBackground{
  position: fixed;
  bottom: 10px;
  left: 10px;
  border-radius: 10px;
  cursor: pointer;
}
.setBackground > img{
  width: 30px;
}
</style>